.bookmark-menu-dropdown {
  padding-top: 10px;
  margin-right: -11px;
}

.bookmark-menu-dropdown-items {
  padding: 15px;
  color: @color-text;
  width: 300px;
  font-size: .725rem;

  h3 {
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .2px;
    color: rgba(0,0,0,.5);
    margin-bottom: 10px;
  }

  &.dropdown-items.with-triangle:before {
    right: 16px;
  }

  .btn {
    &:extend(.btn);
  }

  .header {
    &:extend(.flex);
    align-items: center;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 15px;
  }

  .fa-star {
    border: none;
    font-size: 24px;
    margin-right: 10px;
    color: transparent;
    text-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
    background-color: #bbb;
    -webkit-background-clip: text;
  }

  .input-group {
    &:extend(.flex);
    align-items: center;
    margin-bottom: 10px;

    label {
      display: inline-block;
      width: 45px;
      margin-right: 7px;
      margin-bottom: 0;
      text-align: right;
    }

    input,
    textarea {
      display: inline-block;
      flex: 1;
      font-size: .725rem;
    }

    textarea {
      height: 70px;
      padding-top: 5px;
    }

    input {
      height: 24px;
      line-height: 24px;
      flex: 1;
      color: rgba(0,0,0,.75);
    }

    &.tags {
      position: relative;

      .autocomplete-results {
        position: absolute;
        top: ~"calc(100% + 3px)";
        width: ~"calc(100% - 52px)";
        left: 52px;
        background: #fff;
        border: 1px solid #eee;
        font-size: .725rem;

        .result {
          padding: 3px 10px;

          &.selected {
            background: #eee;
          }
        }
      }
    }

    &.privacy {

      .privacy-wrapper {
        display: flex;
        width: 246px;

        input {
          opacity: 0;
          width: 0;


          &:checked + label{
            background: @blue;
            border-color: @blue;
            color: #fff;
            -webkit-font-smoothing: antialiased;
            font-weight: 500;
            box-shadow: inset 0 0 7px rgba(0,0,0,.1);
          }
        }

        label.btn {
          display: inline-block;
          width: 100%;
          border-radius: 4px 0 0 4px;
          margin-right: 0;
          text-align: center;

          i {
            margin-right: 2px;
          }

          &:not(:last-child) {
            border-right: 0;
          }

          &:last-child {
            border-left: 0;
            border-radius: 0 4px 4px 0;
          }
        }
      }
    }
  }

  .buttons {
    &:extend(.flex);
    justify-content: flex-end;
    padding-top: 10px;
    margin-top: 15px;
    border-top: 1px solid #ddd;
    text-align: right;

    .btn {
      margin-left: 5px;

      &.remove {
        margin-right: auto;
        margin-left: 0;
      }
    }
  }
}

.options-dropdown {
  position: relative;
  width: 40px;

  .options-dropdown-items {
    display: none;
    width: 160px;
    position: absolute;
    right: 0;
    top: 25px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.1);
    border-radius: 2px;
    overflow: hidden;

    &.open {
      display: block;
    }
  }

  .heading {
    &:extend(.flex);
    align-items: center;
    justify-content: space-between;
  }

  .info {
    color: rgba(0,0,0,.45);
    text-align: left;
    width: 100%;
  }
}